<template>
  <div class="merchant-status">
    <!-- 面包屑导航 -->
    <div
      class="container mx-auto px-4 py-4 border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800"
    >
      <Breadcrumb
        :items="[
          { path: '/', title: '首页' },
          { path: '/merchant/apply', title: '商家入驻' },
          { title: '申请状态' },
        ]"
      />
    </div>

    <!-- 页面头部 -->
    <div class="page-header bg-white dark:bg-gray-800 shadow-sm">
      <div class="container mx-auto px-4 py-6">
        <div class="flex items-center justify-between">
          <div>
            <h1 class="text-2xl font-bold text-gray-900 dark:text-white">
              申请状态
            </h1>
            <p class="text-gray-600 dark:text-gray-400 mt-2">
              您可以在这里查看商家入驻申请的审核进度
            </p>
          </div>
        </div>
      </div>
    </div>

    <!-- 主要内容区 -->
    <div class="main-content bg-gray-50 dark:bg-gray-900 min-h-screen py-8">
      <div class="container mx-auto px-4">
        <div class="flex flex-col md:flex-row gap-8">
          <!-- 左侧主要内容 -->
          <div class="flex-1">
            <!-- 状态卡片 -->
            <div
              class="status-card bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6 border border-gray-200 dark:border-gray-700"
            >
              <!-- 状态进度 -->
              <el-steps :active="application.status" finish-status="success">
                <el-step title="已提交" description="申请已提交成功" />
                <el-step title="资料审核" description="预计1-2个工作日" />
                <el-step title="实地考察" description="预计3-5个工作日" />
                <el-step title="签约合作" description="等待签约" />
                <el-step title="入驻成功" description="开始运营" />
              </el-steps>

              <!-- 申请信息 -->
              <div class="mt-8 space-y-6">
                <div class="info-section">
                  <h3
                    class="text-lg font-semibold text-gray-900 dark:text-white mb-4"
                  >
                    申请信息
                  </h3>
                  <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div class="info-item">
                      <span class="label">申请编号：</span>
                      <span class="value">{{ application.id }}</span>
                    </div>
                    <div class="info-item">
                      <span class="label">申请时间：</span>
                      <span class="value">{{ application.applyTime }}</span>
                    </div>
                    <div class="info-item">
                      <span class="label">商家类型：</span>
                      <span class="value">{{
                        application.type === "mall"
                          ? "文创商城商家"
                          : "酒店商家"
                      }}</span>
                    </div>
                    <div class="info-item">
                      <span class="label">商家名称：</span>
                      <span class="value">{{ application.name }}</span>
                    </div>
                  </div>
                </div>

                <!-- 审核进度 -->
                <div class="progress-section">
                  <h3
                    class="text-lg font-semibold text-gray-900 dark:text-white mb-4"
                  >
                    审核进度
                  </h3>
                  <el-timeline>
                    <el-timeline-item
                      v-for="(activity, index) in application.activities"
                      :key="index"
                      :timestamp="activity.time"
                      :type="activity.type"
                    >
                      {{ activity.content }}
                    </el-timeline-item>
                  </el-timeline>
                </div>

                <!-- 备注信息 -->
                <div v-if="application.remarks" class="remarks-section">
                  <h3
                    class="text-lg font-semibold text-gray-900 dark:text-white mb-4"
                  >
                    备注信息
                  </h3>
                  <div
                    class="bg-yellow-50 dark:bg-yellow-900/30 border border-yellow-200 dark:border-yellow-700 rounded-lg p-4"
                  >
                    <p class="text-yellow-800 dark:text-yellow-200">
                      {{ application.remarks }}
                    </p>
                  </div>
                </div>

                <!-- 操作按钮 -->
                <div class="actions-section flex justify-end space-x-4">
                  <el-button
                    v-if="application.status === 0"
                    type="primary"
                    @click="handleEdit"
                  >
                    修改申请
                  </el-button>
                  <el-button
                    v-if="application.status === 3"
                    type="success"
                    @click="handleSign"
                  >
                    在线签约
                  </el-button>
                </div>
              </div>
            </div>
          </div>

          <!-- 右侧边栏 -->
          <div class="md:w-80">
            <div class="sticky top-4 space-y-6">
              <!-- 温馨提示 -->
              <div
                class="tips-card bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6 border border-gray-200 dark:border-gray-700"
              >
                <div class="flex items-center space-x-2 mb-4">
                  <div
                    class="w-8 h-8 bg-blue-100 dark:bg-blue-900/30 rounded-full flex items-center justify-center"
                  >
                    <i
                      class="fas fa-info-circle text-blue-600 dark:text-blue-400"
                    ></i>
                  </div>
                  <h3
                    class="text-lg font-semibold text-gray-900 dark:text-white"
                  >
                    温馨提示
                  </h3>
                </div>
                <ul class="space-y-3 text-gray-600 dark:text-gray-400">
                  <li class="flex items-start">
                    <i
                      class="fas fa-clock text-blue-600 dark:text-blue-400 mt-1 mr-2"
                    ></i>
                    <span>审核时间：正常情况下1-3个工作日内完成初审</span>
                  </li>
                  <li class="flex items-start">
                    <i
                      class="fas fa-user-check text-blue-600 dark:text-blue-400 mt-1 mr-2"
                    ></i>
                    <span>审核通过后，我们会安排工作人员进行实地考察</span>
                  </li>
                  <li class="flex items-start">
                    <i
                      class="fas fa-phone-alt text-blue-600 dark:text-blue-400 mt-1 mr-2"
                    ></i>
                    <span>如有疑问，请联系商家客服热线：400-888-8888</span>
                  </li>
                </ul>
              </div>

              <!-- 快捷操作 -->
              <div
                class="quick-actions bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6 border border-gray-200 dark:border-gray-700"
              >
                <h3
                  class="text-lg font-semibold text-gray-900 dark:text-white mb-4"
                >
                  快捷操作
                </h3>
                <div class="flex gap-3">
                  <el-button type="primary" @click="router.push('/service')">
                    <i class="fas fa-headset mr-2"></i>
                    联系客服
                  </el-button>
                  <el-button
                    type="default"
                    @click="router.push('/merchant/apply')"
                  >
                    <i class="fas fa-store mr-2"></i>
                    重新申请
                  </el-button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import Breadcrumb from "@/components/global/Breadcrumb.vue";
import { ElMessageBox } from "element-plus";

const router = useRouter();

// 模拟申请数据
const application = ref({
  id: "AP202403150001",
  status: 2, // 0: 已提交, 1: 资料审核, 2: 实地考察, 3: 待签约, 4: 入驻成功
  type: "mall",
  name: "贵港文创精品店",
  applyTime: "2024-03-15 14:30:00",
  remarks: "您的营业执照即将到期，请注意更新",
  activities: [
    {
      content: "申请提交成功",
      time: "2024-03-15 14:30:00",
      type: "success",
    },
    {
      content: "资料审核通过",
      time: "2024-03-16 10:15:00",
      type: "success",
    },
    {
      content: "等待实地考察",
      time: "2024-03-16 10:15:00",
      type: "primary",
    },
  ],
});

// 修改申请
const handleEdit = () => {
  router.push("/merchant/apply-form");
};

// 在线签约
const handleSign = () => {
  ElMessageBox.confirm(
    "确认进行在线签约吗？签约前请确保已仔细阅读相关协议。",
    "签约确认",
    {
      confirmButtonText: "确认签约",
      cancelButtonText: "取消",
      type: "warning",
    },
  )
    .then(() => {
      // TODO: 处理签约逻辑
    })
    .catch(() => {});
};

// 设置页面标题
onMounted(() => {
  document.title = "申请状态 - 贵港文化旅游平台";
});
</script>

<style lang="scss" scoped>
.merchant-status {
  @apply bg-gray-50 dark:bg-gray-900;

  .page-header {
    @apply mb-0 border-b border-gray-200 dark:border-gray-700;
  }

  .main-content {
    @apply border-t border-gray-200 dark:border-gray-700;
  }

  .info-section {
    @apply border-b border-gray-200 dark:border-gray-700 pb-6;

    .info-item {
      @apply flex items-center;

      .label {
        @apply text-gray-500 dark:text-gray-400 w-24 flex-shrink-0;
      }

      .value {
        @apply text-gray-900 dark:text-white;
      }
    }
  }

  .progress-section {
    @apply border-b border-gray-200 dark:border-gray-700 pb-6;
  }

  .remarks-section {
    @apply border-b border-gray-200 dark:border-gray-700 pb-6;
  }

  .actions-section {
    @apply pt-6;
  }

  .quick-actions {
    .el-button {
      @apply justify-center;
    }
  }
}

// Element Plus 暗色模式适配
:deep(.el-steps) {
  .el-step__title {
    @apply text-gray-700 dark:text-gray-300;
  }

  .el-step__description {
    @apply text-gray-500 dark:text-gray-400;
  }
}

:deep(.el-timeline) {
  .el-timeline-item__content {
    @apply text-gray-700 dark:text-gray-300;
  }

  .el-timeline-item__timestamp {
    @apply text-gray-500 dark:text-gray-400;
  }
}
</style>
